import energyImg from "@/assets/cir.png"
import { ref } from "vue";
class Yanim {
    constructor(readonly dom: HTMLElement | null, readonly targetdom: HTMLElement | null) { }
    createimg() {
        const img = document.createElement('img');
        img.setAttribute('val', Yanim.energy.toString());
        img.src = energyImg;
        const wh = (Math.random() * 40) + 30;
        if (this.dom !== null) {
            const react = this.dom.getClientRects()[0];
            const left = Math.random() * (react.width);
            const top = Math.random() * (react.height);
            img.style.cssText = `
            width:${wh}px;
            height:${wh}px;
            position:absolute;
            left:${react.left + left}px;
            top:${react.top + top}px;
        `;
            if (this.dom !== undefined) {
                this.dom.appendChild(img);
            }
        }
        return img;
    }
    getKeyForm(img: HTMLElement) {
        //Math.random() * 2000
        const imgkefframe = new KeyframeEffect(img, [
            { scale: 1 },
            { left: `${document.body.clientWidth - 90}px`, top: '1%', scale: 0 },
        ], { duration: Math.random() * 600, fill: "forwards" });  
        return imgkefframe;
    }
    getAnim(frame: KeyframeEffect) {
        const anim = new Animation(frame);
        return anim;
    }
    static isActive = false;
    static energy = 100;
    static sum = 10;
    static show = ref(false);
    static run(anim: Yanim) {
        this.show.value = true;
        if (anim.targetdom !== null) {
            const tips = document.createElement('p');
            tips.style.cssText = `color:yellowgreen;`;
            anim.targetdom.appendChild(tips);
            for (let i = 0; i < this.sum; i++) {
                setTimeout(() => {
                    const anim_ = anim.getAnim(anim.getKeyForm(anim.createimg()));
                    anim_.onfinish = () => {
                        if (i < (this.sum - 1)) {
                            ((anim_.effect as any).target as HTMLElement).remove();
                        } else {
                            ((anim_.effect as any).target as HTMLElement).remove();
                            // tips.textContent = `+ ${((anim_.effect as any).target as HTMLElement).getAttribute('val')}`;
                            setTimeout(() => {
                                tips.remove();
                                Yanim.show.value = false;
                                Yanim.isActive = false;
                            }, 1500);
                        }
                    }
                    anim_.play();
                }, i * 100);
            }
        }
    }
    static active(energy: number = 100) {
        // this.energy = energy; 
        this.energy = energy;
        // this.sum = Math.floor(this.energy / 10);
        this.sum = 9;
        Yanim.run(new Yanim(document.getElementById('yanim'), document.getElementById('energy-num-y')));
    }
}
export { Yanim };